<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      layout:decorate="~{manage/layout}" lang="zh">
<head>
    <title>管理员管理</title>
</head>
<body>
<div layout:fragment="main-container" class="main-container">
    <div id="mdc-data-table" class="mdc-data-table__container">
        <!--扩展搜索条件-->
        <div class="search-container-extend">
        </div>
        <div class="operator-container">
            <div class="btn-container">
                <button class="mdc-button mdc-button--raised" id="refreshBtn">
                    <span class="mdc-button__label">刷新</span>
                </button>
                <a class="mdc-button mdc-button--raised" th:href="@{/manage/manager}"
                   sec:authorize="hasAnyAuthority('global:create','manger:create')">
                    <span class="mdc-button__label">添加</span>
                </a>
                <button class="mdc-button mdc-button--raised" id="editBtn" disabled
                        sec:authorize="hasAnyAuthority('global:write','manger:write')">
                    <span class="mdc-button__label">编辑</span>
                </button>
                <button class="mdc-button mdc-button--raised" id="delBtn" disabled
                        sec:authorize="hasAnyAuthority('global:delete','manger:delete')">
                    <span class="mdc-button__label">删除</span>
                </button>
                <button class="mdc-button mdc-button--raised" id="roleBtn" disabled
                        sec:authorize="hasAnyAuthority('global:write','manger:write')">
                    <span class="mdc-button__label">角色配置</span>
                </button>
            </div>
            <div class="search-container">
                <div class="mdc-text-field text-field mdc-text-field--fullwidth mdc-text-field--no-label mdc-ripple-upgraded mdc-text-field--with-trailing-icon"
                     data-mdc-auto-init="MDCTextField">
                    <input type="text" id="criteria" class="mdc-text-field__input"
                           placeholder="请输入工号/姓名/电话" autocomplete="off" data-enter-trigger="refreshTable">
                    <i class="material-icons mdc-text-field__icon" tabindex="0" role="button" id="searchBtn">search</i>
                    <div class="mdc-line-ripple"></div>
                </div>
            </div>
        </div>
    </div>
    <div th:fragment="roles" id="roles">
        <div class="mdc-form-field" th:each="r:${roles}">
            <div class="mdc-checkbox">
                <input type="checkbox"
                       class="mdc-checkbox__native-control"
                       th:id="${'checkbox-'+r.id}"
                       th:value="${r.id}"
                       th:checked="${not #lists.isEmpty(withRoles) and #lists.contains(withRoles,r.id)?'checked':'false'}"/>
                <div class="mdc-checkbox__background">
                    <!--suppress ALL-->
                    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                        <path class="mdc-checkbox__checkmark-path" fill="none"
                              d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
                    </svg>
                    <div class="mdc-checkbox__mixedmark"></div>
                </div>
            </div>
            <label th:for="${'checkbox-'+r.id}" th:text="${r.name}"></label>
        </div>
    </div>
</div>
<th:block layout:fragment="script">
    <script type="text/javascript">
      $(function() {
        // 自动注册 data-mdc-auto-init 元素
        mdc.autoInit();
        // 表格初始化
        let mdcDataTable = $('#mdc-data-table').mdcDataTable({
          url: '/manage/manager/page',
          queryParams: {},
          container: '#mdc-data-table',
          columns: [
            {
              data: 'empNo',
            },
            {
              data: 'name',
            },
            {
              data: 'genderDesc',
            },
            {
              data: 'phone',
            },
            {
              data: 'isActiveDesc',
            },
            {
              data: 'rolesDesc',
            },
          ],
          thead: [
            {
              data: '工号',
              style: 'mdc-data-table__cell--non-numeric',
            },
            {
              data: '姓名',
              style: 'mdc-data-table__cell--non-numeric',
            },
            {
              data: '性别',
              style: 'mdc-data-table__cell--non-numeric',
            },
            {
              data: '电话',
              style: 'mdc-data-table__cell--non-numeric',
            },
            {
              data: '是否可用',
              style: 'mdc-data-table__cell--non-numeric',
            },
            {
              data: '角色',
              style: 'mdc-data-table__cell--non-numeric',
            },
          ],
          // 是否分页
          pagination: true,
          // 页面数据条数
          pageSize: 5,
          // 设置页面可以显示的数据条数
          pageList: [5, 10, 15, 20],
          // 首页页码
          pageNumber: 1,
          editable: false,
          callback: function() {
          },
          noneSelect: function() {
            $('#editBtn').prop('disabled', true);
            $('#delBtn').prop('disabled', true);
            $('#roleBtn').prop('disabled', true);
          },
          singleSelect: function() {
            $('#editBtn').prop('disabled', false);
            $('#delBtn').prop('disabled', false);
            $('#roleBtn').prop('disabled', false);
          },
          multipleSelect: function() {
            $('#editBtn').prop('disabled', true);
            $('#delBtn').prop('disabled', false);
            $('#roleBtn').prop('disabled', true);
          },
        });
        window.mdcDataTable = mdcDataTable;
        window.refreshTable = function() {
          window.mdcDataTable.refresh({criteria: $('#criteria').val(), page: 1});
        };
        // 刷新,搜索
        $('#refreshBtn,#searchBtn').click(refreshTable);
        // 编辑
        $('#editBtn').on('click', function() {
          let selectItems = mdcDataTable.getSelectItems();
          if (selectItems.length !== 1) {
            $.alert('请选择一条记录');
            return false;
          }
          window.location.href = '/manage/manager/' + selectItems[0].id;
        });
        // 删除
        $('#delBtn').on('click', function() {
          let selectItems = mdcDataTable.getSelectItems();
          if (selectItems.length < 1) {
            $.alert('请至少选择一条记录');
            return false;
          }
          $.confirm('确认要删除这' + selectItems.length + '条记录么 ?', function() {
            let ids = [];
            selectItems.forEach(function(item) {
              ids.push(item.id);
            });
            $.delete('/manage/manager/deleteBatch', {'ids': ids.toString()}, function(res) {
              console.log(JSON.stringify(res));
              $.alert(res.msg);
              let delCount = selectItems.length;
              mdcDataTable.refresh({}, delCount);
            }, function(res) {
              console.log(JSON.stringify(res));
              $.alert(res.msg);
            });
          });
        });
        // 角色配置
        $('#roleBtn').on('click', function() {
          let selectItems = mdcDataTable.getSelectItems();
          if (selectItems.length < 1) {
            $.alert('请至少选择一条记录');
            return false;
          }
          let id = selectItems[0].id;
          $('#roles').load('/manage/manager/' + id + '/roles', function() {
            let html = $(this).html();
            $(this).empty();
            $(this).hide();
            $.modal(html, function(dom) {
              let roleIds = [];
              $.each($(dom.target).find('.mdc-form-field'), function(index, item) {
                let checkbox = $(item).find('input[id^=checkbox-]');
                if ($.checked(checkbox)) {
                  roleIds.push(checkbox.val());
                }
              });
              $.put('/manage/manager/' + id + '/roles', {'roleIds': roleIds.toString()}, function(res) {
                res.result === true ? $.alert(res.msg, function() {
                  mdcDataTable.refresh();
                }) : $.alert(res.msg);
              });
            });
          });
        });
      });
    </script>
</th:block>
</body>
</html>
